var Type = Vue.component('type', {
    data() {
        return {
            editStatus: true,       // 是否可编辑
            typeInfoData: [],       // 已经存在的
            typeInfoOldData: [],    // 已经存在的旧数据
            cate: "",               // 当前的类型名
            name: "",               // 当前的产品名
            male: "",               // 当前的男装的数量
            female: "",             // 当前的女装的数量
            child: ""               // 当前的童装的数量
        }
    },

    template: `<div class="type__box">
                    <div class="type__con">
                        <h3 class="index__title type__title">公司产品种类</h3>
                        <div class="index__info type__info">
                            <div class="index__table__list type__table__list">
                                <table class="table__type">
                                    <tbody>
                                        <tr>
                                            <th>类型</th>
                                            <th>产品名称</th>
                                            <th>男装</th>
                                            <th>女装</th>
                                            <th>童装</th>
                                        </tr>
                                        <tr v-for="(item, index) in typeInfoData" :key="index" style="">
                                            <td>
                                                <span>{{item.cate}}</span>
                                            </td>
                                            <td>
                                                <span>{{item.name}}</span>
                                            </td>
                                            <td>
                                                <span>{{item.male || 0}}</span>
                                            </td>
                                            <td>
                                                <span>{{item.female || 0}}</span>
                                            </td>
                                            <td>
                                                <span>{{item.child || 0}}</span>
                                                <b v-show="!editStatus" @click="deleteInfo(index)">—</b>
                                            </td>
                                        </tr>
                                        <tr v-show="!editStatus">
                                            <td>
                                                <input placeholder="输入" v-model="cate">
                                            </td>
                                            <td>
                                                <input placeholder="输入" v-model="name">
                                            </td>
                                            <td>
                                                <input type="number" placeholder="输入" v-model="male">
                                            </td>
                                            <td>
                                                <input type="number" placeholder="输入" v-model="female">
                                            </td>
                                            <td>
                                                <input type="number" placeholder="输入" v-model="child">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="index__table__add" v-show="!editStatus">
                                    <span @click="addTypeInfo">+</span>
                                </div>
                            </div>
                        </div>
                        <div class="common__btn">
                            <div class="common__btn__box">
                                <span class="common__btn__sure" v-show="editStatus" @click="setEditFun">编辑</span>
                                <span class="common__btn__close" v-show="!editStatus" @click="setCancelFun">取消</span>
                                <span class="common__btn__sure" v-show="!editStatus" @click="updateTypeInfo">保存设置</span>
                            </div>
                        </div>
                    </div>
                </div>`,

    methods: {
        setEditFun: function () {  // 编辑
            this.editStatus = !this.editStatus
        },
        setCancelFun: function () { // 取消
            var data = JSON.stringify(this.typeInfoOldData);
            this.typeInfoData = JSON.parse(data);
            this.editStatus = !this.editStatus;
        },
        getTypeInfo() {
            // 获取产品种类
            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/member/company/com-pro-type-list",
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token')
                },
                success:function(res){
                    if(0 == res.code) {
                        var data = JSON.stringify(res.data);
                        self.typeInfoData = JSON.parse(data);
                        self.typeInfoOldData = JSON.parse(data);
                    }
                }
            })
        },
        addTypeInfo() {
            // 添加一行新的数据
            if(this.cate == "" || this.name == "" || this.male == "" || this.female == "" || this.child == "") {
                ELEMENT.Message.warning('数据不能为空');
                return;
            }
            this.typeInfoData.push({
                cate: this.cate,
                name: this.name,
                male: this.male,
                female: this.female,
                child: this.child
            });
            // 将数据清空
            this.cate = "";
            this.name = "";
            this.male = "";
            this.female = "";
            this.child = "";
        },
        deleteInfo(_index) {
            // 删除当前这一行的数据
            var _data = this.typeInfoData.filter((item, index) => {
                if(_index != index) {
                    return item;
                }
            })
            this.typeInfoData = _data;
        },
        updateTypeInfo() {
            // 保存信息
            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/member/company/com-pro-type-set2",
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token'),
                    pro_types: JSON.stringify(self.typeInfoData)
                },
                success:function(res){
                    if(0 == res.code) {
                        ELEMENT.Message.success('保存数据成功');
                        self.editStatus = !self.editStatus;
                        var data = JSON.stringify(self.typeInfoData);
                        self.typeInfoOldData = JSON.parse(data);
                    }
                }
            })
        }
    },

    mounted() {
        
    },

    created() {
        // 获取产品种类
        this.getTypeInfo();
    },
})